<template>
  <div class="email-dia">
    <aside>
      <div class="option-group">
        <li
          @click="islink = 0"
          :class="islink == 0 ? 'activeLink' : ''"
          href="#jichu"
        >
          基础信息
        </li>
        <li
          @click="islink = 1"
          :class="islink == 1 ? 'activeLink' : ''"
          href="#email"
        >
          邮件内容
        </li>
      </div>
    </aside>

    <el-form
      class="dia-form"
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="small"
      label-width="127px"
    >
      <div v-show="islink == 0">
        <el-col :span="24">
          <div class="tips" name="jichu">基础信息</div>
        </el-col>
        <el-col :span="24">
          <el-form-item label="通知模板名称" prop="field101">
            <el-input
              v-model="formData.field101"
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发送邮件服务器" prop="field102">
            <el-input
              v-model="formData.field102"
              placeholder="请输入发送邮件服务器"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发送邮件地址" prop="field103">
            <el-input
              v-model="formData.field103"
              placeholder="请输入发送邮件地址"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发送邮件端口" prop="field105">
            <el-input
              v-model="formData.field105"
              placeholder="请输入发送邮件端口"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发送邮件密码" prop="field106">
            <el-input
              v-model="formData.field106"
              placeholder="请输入发送邮件密码"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="接受邮件地址" prop="field107">
            <el-input
              v-model="formData.field107"
              placeholder="请输入，多个用英文;隔开"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="接受邮件地址" prop="field108">
            <el-input
              v-model="formData.field108"
              placeholder="请输入，多个用英文;隔开"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
      </div>
      <div v-show="islink == 1">
        <el-col :span="24">
          <div class="tips" name="email">邮件内容</div>
        </el-col>
        <el-col :span="24">
          <el-form-item label="邮件模板" prop="field111">
            <el-radio-group v-model="formData.field111" size="medium">
              <el-radio
                v-for="(item, index) in field111Options"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
              >{{ item.label }}
              </el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="标题" prop="field112">
            <el-input
              v-model="formData.field112"
              placeholder="请输入，多个用英文;隔开标题"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="正文" prop="field113">
            <el-input
              v-model="formData.field113"
              type="textarea"
              placeholder="请输入正文"
              :maxlength="500"
              show-word-limit
              :autosize="{ minRows: 4, maxRows: 4 }"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      islink: 0,
      formData: {
        field101: undefined,
        field102: undefined,
        field103: undefined,
        field105: undefined,
        field106: undefined,
        field107: undefined,
        field108: undefined,
        field109: undefined,
        field111: 1,
        field112: undefined,
        field113: '您好'
      },
      rules: {
        field110: [
          {
            required: true,
            message: '请输入单行文本',
            trigger: 'blur'
          }
        ],
        field101: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          }
        ],
        field102: [
          {
            required: true,
            message: '请输入发送邮件服务器',
            trigger: 'blur'
          }
        ],
        field103: [
          {
            required: true,
            message: '请输入发送邮件地址',
            trigger: 'blur'
          }
        ],
        field105: [
          {
            required: true,
            message: '请输入发送邮件端口',
            trigger: 'blur'
          }
        ],
        field106: [
          {
            required: true,
            message: '请输入发送邮件密码',
            trigger: 'blur'
          }
        ],
        field107: [
          {
            required: true,
            message: '请输入，多个用英文;隔开',
            trigger: 'blur'
          }
        ],
        field108: [
          {
            required: true,
            message: '请输入，多个用英文;隔开',
            trigger: 'blur'
          }
        ],
        field109: [
          {
            required: true,
            message: '请输入，多个用英文;隔开',
            trigger: 'blur'
          }
        ],
        field111: [],
        field112: [
          {
            required: true,
            message: '请输入，多个用英文;隔开标题',
            trigger: 'blur'
          }
        ],
        field113: [
          {
            required: true,
            message: '请输入正文',
            trigger: 'blur'
          }
        ]
      },
      field111Options: [
        {
          label: '及时发送模板',
          value: 1
        },
        {
          label: '定时发送模板',
          value: 2
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {}
}
</script>
<style scoped lang="scss">
.email-dia {
  display: flex;
  height: 540px;
  width: 100%;
  justify-content: space-between;
  max-height: 100vh;

  aside {
    padding: 0;
    width: 140px !important;
    position: absolute;
    height: 540px;
    background: #fff;
    border-right: 1px solid #e8e8e8;

    .option-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;

      li {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 15px 0 15px 24px;
        cursor: pointer;
        font-size: 14px;
        color: #303032;
        font-weight: 400;

        &.activeLink {
          border-right: 2px solid #2979ff;
          background: #dfecff;
          color: #2979ff;
        }
      }
    }
  }

  .dia-form {
    margin-left: 140px;
    padding: 24px 80px 24px 24px;
    width: 100%;
  }
}
</style>
